<template>
  <div class="page_div">
    <el-card>
      <div slot="header">
        <div class="card_header_div">
          订单统计
          <el-date-picker v-model="yearValue" type="year" :clearable="false" size="mini" placeholder="选择年份"
            @change="loadDataFn" />
        </div>
      </div>
      <div class="statistics_div">
        <el-card class="statistics_item_div">
          <div slot="header" class="item_title">
            <img src="@/assets/index/rent.svg">
            租金
          </div>
          <div class="item_box_value">
            <div class="item_value">
              <div class="item_value_title">未缴费</div>
              <div class="item_value_value">{{ statisticsData.not_aid['租金'] }}</div>
            </div>
            <div class="item_value">
              <div class="item_value_title">已缴费</div>
              <div class="item_value_value">{{ statisticsData.paid['租金'] }}</div>
            </div>
            <div class="item_value">
              <div class="item_value_title">已退费</div>
              <div class="item_value_value">{{ statisticsData.refunded['租金'] }}</div>
            </div>
          </div>
        </el-card>
        <el-card class="statistics_item_div">
          <div slot="header" class="item_title">
            <img src="@/assets/index/business.svg">
            商管费
          </div>
          <div class="item_box_value">
            <div class="item_value">
              <div class="item_value_title">未缴费</div>
              <div class="item_value_value">{{ statisticsData.not_aid['商管费'] }}</div>
            </div>
            <div class="item_value">
              <div class="item_value_title">已缴费</div>
              <div class="item_value_value">{{ statisticsData.paid['商管费'] }}</div>
            </div>
            <div class="item_value">
              <div class="item_value_title">已退费</div>
              <div class="item_value_value">{{ statisticsData.refunded['商管费'] }}</div>
            </div>
          </div>
        </el-card>
        <el-card class="statistics_item_div">
          <div slot="header" class="item_title">
            <img src="@/assets/index/deposit.svg">
            押金
          </div>
          <div class="item_box_value">
            <div class="item_value">
              <div class="item_value_title">未缴费</div>
              <div class="item_value_value">{{ statisticsData.not_aid['押金'] }}</div>
            </div>
            <div class="item_value">
              <div class="item_value_title">已缴费</div>
              <div class="item_value_value">{{ statisticsData.paid['押金'] }}</div>
            </div>
            <div class="item_value">
              <div class="item_value_title">已退费</div>
              <div class="item_value_value">{{ statisticsData.refunded['押金'] }}</div>
            </div>
          </div>
        </el-card>
        <el-card class="statistics_item_div">
          <div slot="header" class="item_title">
            <img src="@/assets/index/bond.svg">
            保证金
          </div>
          <div class="item_box_value">
            <div class="item_value">
              <div class="item_value_title">未缴费</div>
              <div class="item_value_value">{{ statisticsData.not_aid['保证金'] }}</div>
            </div>
            <div class="item_value">
              <div class="item_value_title">已缴费</div>
              <div class="item_value_value">{{ statisticsData.paid['保证金'] }}</div>
            </div>
            <div class="item_value">
              <div class="item_value_title">已退费</div>
              <div class="item_value_value">{{ statisticsData.refunded['保证金'] }}</div>
            </div>
          </div>
        </el-card>
        <el-card class="statistics_item_div">
          <div slot="header" class="item_title">
            <img src="@/assets/index/water.svg">
            水费
          </div>
          <div class="item_box_value">
            <div class="item_value">
              <div class="item_value_title">未缴费</div>
              <div class="item_value_value">{{ statisticsData.not_aid['水费'] }}</div>
            </div>
            <div class="item_value">
              <div class="item_value_title">已缴费</div>
              <div class="item_value_value">{{ statisticsData.paid['水费'] }}</div>
            </div>
            <div class="item_value">
              <div class="item_value_title">已退费</div>
              <div class="item_value_value">{{ statisticsData.refunded['水费'] }}</div>
            </div>
          </div>
        </el-card>
        <el-card class="statistics_item_div">
          <div slot="header" class="item_title">
            <img src="@/assets/index/electricity.svg">
            电费
          </div>
          <div class="item_box_value">
            <div class="item_value">
              <div class="item_value_title">未缴费</div>
              <div class="item_value_value">{{ statisticsData.not_aid['电费'] }}</div>
            </div>
            <div class="item_value">
              <div class="item_value_title">已缴费</div>
              <div class="item_value_value">{{ statisticsData.paid['电费'] }}</div>
            </div>
            <div class="item_value">
              <div class="item_value_title">已退费</div>
              <div class="item_value_value">{{ statisticsData.refunded['电费'] }}</div>
            </div>
          </div>
        </el-card>
      </div>
    </el-card>
    <div class="echarts_div">
      <el-card class="echarts_card_div">
        <div class="card_header_div">
          未缴费账单统计
        </div>
        <div id="echarts_unpaid_id" class="echarts_box_div" />
      </el-card>
      <el-card class="echarts_card_div">
        <div class="card_header_div">
          已缴费账单统计
        </div>
        <div id="echarts_paid_id" class="echarts_box_div" />
      </el-card>
      <el-card class="echarts_card_div">
        <div class="card_header_div">
          已退费账单统计
        </div>
        <div id="echarts_refunded_id" class="echarts_box_div" />
      </el-card>
    </div>
  </div>
</template>

<script lang="js">
import echarts from 'echarts'
import { getOrderStatisticsApi } from '@/api/index'
import { Loading } from 'element-ui';
export default {
  data() {
    return {
      chartObj: null,
      yearValue: '',
      unpaidData: {},
      paidData: {},
      statisticsData: {
        not_aid: {}, // 未缴费
        paid: {}, // 已缴费
        refunded: {} // 已退款
      }
    }
  },
  created() {

  },
  mounted() {
    this.yearValue = new Date()
    this.loadDataFn()
  },
  created() {
  },
  methods: {
    // 加载数据方法
    loadDataFn() {
      const loading = Loading.service({
        lock: true,
        text: '加载中...',
      });
      getOrderStatisticsApi({
        year: this.yearValue.getFullYear()
      }).then(res => {
        loading.close()
        this.statisticsData.not_aid = res.not_aid.summary
        this.statisticsData.paid = res.paid.summary
        this.statisticsData.refunded = res.refunded.summary

        // 处理echarts数据
        let xData = [],
          yData = [
            {
              name: '保证金',
              type: 'line',
              data: []
            },
            {
              name: '商管费',
              type: 'line',
              data: []
            },
            {
              name: '押金',
              type: 'line',
              data: []
            },
            {
              name: '水费',
              type: 'line',
              data: []
            },
            {
              name: '电费',
              type: 'line',
              data: []
            },
            {
              name: '租金',
              type: 'line',
              data: []
            }
          ],
          legend = [];
        for (let key in res.not_aid.monthly) {
          xData.push(key + '月')
          yData.forEach(item => {
            legend.push(item.name)
            item.data.push(res.not_aid.monthly[key][item.name])
          })
        }
        this.initEchartsFn('echarts_unpaid_id', xData, yData);

        xData = []
        yData.forEach(item => {
          item.data = []
        }),
          legend = []
        for (let key in res.paid.monthly) {
          xData.push(key + '月')
          yData.forEach(item => {
            legend.push(item.name)
            item.data.push(res.paid.monthly[key][item.name])
          })
        }
        this.initEchartsFn('echarts_paid_id', xData, yData, legend);

        xData = []
        yData.forEach(item => {
          item.data = []
        }),
          legend = []
        for (let key in res.refunded.monthly) {
          xData.push(key + '月')
          yData.forEach(item => {
            legend.push(item.name)
            item.data.push(res.refunded.monthly[key][item.name])
          })
        }
        this.initEchartsFn('echarts_refunded_id', xData, yData, legend);
      }).catch(err => {
        loading.close()
        console.log('getOrderStatisticsApi', err)
      })
    },
    // 实例化图标对象
    initEchartsFn(id, xData, yDate, legend) {
      this.chartObj = echarts.init(document.getElementById(id))
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        legend: {
          data: legend,
          top: '6%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '18%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
        },
        series: yDate
      }
      option && this.chartObj.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>
.page_div {
  padding: 10px 0;

  .card_header_div {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
  }

  .statistics_div {
    background-color: #fff;
    display: flex;
    gap: 10px;

    .statistics_item_div {
      width: 16%;
      display: flex;
      flex-flow: column;

      .item_title,
      .item_value {
        width: 100%;
        text-align: center;
        font-weight: bold;
      }

      .item_title {
        font-size: 16px;
        display: flex;
        align-items: center;
        gap: 8px;

        img {
          width: 22px;
          height: 22px;
        }
      }

      .item_box_value {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;

        .item_value {
          width: 33.33%;
          font-size: 14px;

          .item_value_title {
            color: #999;
          }

          .item_value_value {
            margin-top: 10px;
          }
        }
      }
    }
  }

  .echarts_div {
    width: 100%;
    display: flex;
    margin-top: 10px;
    gap: 10px;

    .echarts_card_div {
      width: 50%;

      .echarts_box_div {
        width: 100%;
        height: calc(100vh - 450px);
      }
    }
  }
}
</style>
